<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='特色农产品', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特色农产品 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .product-card {
            transition: transform 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }
        .category-filter {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        .category-btn {
            margin: 5px;
            border-radius: 20px;
        }
        .category-btn.active {
            background-color: #28a745;
            border-color: #28a745;
        }
        .page-header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 60px 0;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面头部 -->
        <section class="page-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto text-center">
                        <h1 class="display-5 fw-bold mb-3">贫困地区特色农产品</h1>
                        <p class="lead">每一件农产品都承载着农户的希望，每一次购买都是对脱贫事业的支持</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 分类筛选 -->
        <section class="py-4">
            <div class="container">
                <div class="category-filter">
                    <h5 class="mb-3"><i class="fas fa-filter"></i> 产品分类</h5>
                    <div class="d-flex flex-wrap">
                        <a href="/product/list" class="btn btn-outline-success category-btn" 
                           th:classappend="${currentCategory == null ? 'active' : ''}">
                            全部产品
                        </a>
                        <a th:each="category : ${categories}" 
                           th:href="@{/product/list(category=${category})}" 
                           class="btn btn-outline-success category-btn"
                           th:classappend="${currentCategory == category ? 'active' : ''}"
                           th:text="${category}">分类</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 产品列表 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <!-- 如果没有产品 -->
                    <div th:if="${#lists.isEmpty(products)}" class="col-12 text-center py-5">
                        <i class="fas fa-box-open fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">暂无相关产品</h4>
                        <p class="text-muted mb-4">请稍后再来查看，或者浏览其他分类的产品</p>
                        <a href="/product/list" class="btn btn-success">查看全部产品</a>
                    </div>

                    <!-- 产品列表 -->
                    <div th:each="product : ${products}" class="col-lg-3 col-md-4 col-sm-6 mb-4">
                        <div class="card product-card h-100">
                            <div class="position-relative">
                                <img th:src="@{${product.imageUrl} ?: '/images/default-product.jpg'}" 
                                     th:alt="${product.name}" 
                                     class="card-img-top" 
                                     style="height: 250px; object-fit: cover;">
                                <div class="position-absolute top-0 end-0 m-2">
                                    <span class="badge bg-success" th:text="${product.category}">分类</span>
                                </div>
                            </div>
                            
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title" th:text="${product.name}">产品名称</h5>
                                
                                <div class="mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-map-marker-alt"></i> 
                                        <span th:text="${product.origin}">产地</span>
                                    </small>
                                </div>
                                
                                <p class="card-text flex-grow-1" th:text="${#strings.abbreviate(product.description, 80)}">
                                    产品描述...
                                </p>
                                
                                <!-- 扶贫背景 -->
                                <div class="mb-3" th:if="${product.povertyBackground}">
                                    <div class="alert alert-info py-2 mb-2">
                                        <small><i class="fas fa-heart"></i> <span th:text="${#strings.abbreviate(product.povertyBackground, 60)}">扶贫背景</span></small>
                                    </div>
                                </div>
                                
                                <div class="mt-auto">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="h5 text-success mb-0">
                                            ¥<span th:text="${product.price}">0.00</span>
                                        </span>
                                        <small class="text-muted">
                                            库存：<span th:text="${product.stock}">0</span>
                                        </small>
                                    </div>
                                    <a th:href="@{/product/detail/{id}(id=${product.id})}" 
                                       class="btn btn-success w-100">
                                        <i class="fas fa-eye"></i> 查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 